var path = require('path');
var webpack = require('webpack');
// 打包html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 打包前先清空输出目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 压缩JS
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');


const PUBLIC_PATH = '/';
module.exports = {
  // 配置入口文件的地址
  entry: {
    index: './src/index.js'
  },
  //配置出口文件的地址
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[hash].js',
    publicPath: PUBLIC_PATH
  },
  // 配置模块, 主要用来配置不同文件的加载器
  module: {
    rules: [
      { // es6转es5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      { // 支持加载css文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
        include: path.join(__dirname, './src'),
        exclude: /node_modules/
      },
      {
        test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader']
      }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      { // 支持图片
        test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
        loader: {
          loader: 'url-loader',
          options: {
            limit: 1 * 1024, // 图片大小 > limit 使用file-loader, 反之使用url-loader
            name: 'static/img/[name].[hash:7].[ext]'
          }
        }
      },
      { // 在HTML中使用图片
        test: /\.(html|html)$/,
        use: 'html-withimg-loader',
        include: path.join(__dirname, './src'),
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    minimize: true
  },
  // resolve: {
  //   //自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
  //   extensions: ["", ".js", ".css", ".json"],
  // },
  // 配置插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定产出的模板
      filename: 'index.html', // 产出的文件名
      chunks: ['src', 'index'], // 在产出的HTML文件里引入哪些代码块
      hash: true, // 名称是否哈希值
      title: 'base', // 可以给模板设置变量名，在html模板中调用 htmlWebpackPlugin.options.title 可以使用
      minify: { // 对html文件进行压缩
        removeAttributeQuotes: true // 移除双引号
      }
    }),
    // 拷贝静态文件
    // new CopyWebpackPlugin([{
    //   from: path.join(__dirname, 'public'), // 从哪里复制
    //   to: path.join(__dirname, 'dist', 'public') // 复制到哪里
    // }]),
    // 打包前先清空输出目录
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    // 压缩JS
    new UglifyjsWebpackPlugin()
  ],
  // 配置开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 配置开发服务运行时的文件根目录
    host: 'localhost', // 开发服务器监听的主机地址
    compress: true, // 开发服务器是否启动gzip等压缩
    port: 8081 // 开发服务器监听的端口
  },
  //  调试打包后的代码
  devtool: 'eval-source-map',
  // source-map 把映射文件生成到单独的文件， 最完整最慢
  // cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
  // eval-source-map 使用eval打包源文件模块, 在同一个文件中生成完整sourcemap
  // cheap-module-eval-source-map sourcemap和打包后的JS同行显示， 没有映射列
  mode: 'none',
  // 当代码发生修改后可以自动重新编译
  // watch: true,
  // watchOptions: {
  //   ignored: /node_modules/, //忽略不用监听变更的目录
  //   aggregateTimeout: 500, // 文件发生改变后多长时间后再重新编译（Add a delay before rebuilding once the first file changed ）
  //   poll: 1000 //每秒询问的文件变更的次数
  // }
  // 服务器代理
  // proxy: {
  //   "/api": "http://localhost:9000",
  // }

}